<template>
  <view>
    <view class="row paddingL15" :style="{ background: tabBg }" style="padding-top: 20rpx;padding-bottom: 20rpx">
      <view v-for="(item,index) in tabList" :key="index" class="row" style="position: relative">
        <view v-show="index === 0"
              :style="{ color: chooseIndex == index ? '#f0ad4e' : '#666666'}">
          <view style="width: 220rpx;height: 53rpx;">
            <image src="/static/image/firstArrow.png" style="width: 100%;height: 100%"></image>
          </view>
          <text style="white-space: nowrap; position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">{{ item }}</text>
        </view>
        <!--<view v-if="index == 0" class="right"></view>-->
        <view v-if="index != 0" style="position:relative;" :style="{ color: chooseIndex == index ? '#f0ad4e' : '#666666'}">
          <view style="width: 220rpx;height: 53rpx;">
            <image src="/static/water/arrow.png" style="width: 100%;height: 100%"></image>
          </view>
          <text style="white-space: nowrap; position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    chooseIndex: {
      type: Number,
      default: 0
    },
    tabBg: {
      type: String,
      default: '#FFFFFF'
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  width: 35rpx;
  height: 35rpx;
  border-width: 1px 1px 0 0;
  border-color: #f0ad4e;
  border-style: solid;
  background: transparent;
  transform: rotate(45deg);
  display: inline-block;
  margin-left: -18rpx;
}
.leftbottom {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid #f0ad4e;
  position: absolute;
  bottom: 0;
  left: -20rpx;
}
.leftbottom:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid white;
  position: absolute;
  bottom: 2rpx;
  left: 5rpx;
}
.leftop {
  width: 0;
  height: 0;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #f0ad4e;
  position: absolute;
  top: 0;
  left: -20rpx;
}
.leftop:after {
  content: '';
  width: 0;
  height: 0;
  border-bottom: 15px solid transparent;
  border-right: 15px solid white;
  position: absolute;
  top: 2rpx;
  left: 5rpx;
}
.first {
  border-left: 1px solid #f0ad4e;
  border-top: 1px solid #f0ad4e;
  border-bottom: 1px solid #f0ad4e;
}
.another {
  border-top: 1px solid #f0ad4e;
  border-bottom: 1px solid #f0ad4e;
  border-left: 1px solid #f0ad4e;
}
</style>